<template>
  <div>
    <!-- 工具栏区域 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        原料名称：
        <el-select
          v-model="addForm.materialName"
          filterable
          placeholder="请选择"
          class="searchInput"
        >
          <el-option
            v-for="item in coldInDataByPage"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 查询时间段：
        <el-time-picker
          is-range
          v-model="time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        ></el-time-picker>
        <span class="searchBtn">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </span>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary" plain @click="add">新增入库原料</el-button>
        <el-button type="danger" plain @click="bulkDeletion"
          >批量删除</el-button
        >
      </div>
    </table-bar>

    <el-table
      :data="coldInDataByPage"
      style="width: 100%"
      class="table"
      ref="CSInInfo"
    >
      <el-table-column type="selection" width="65"></el-table-column>
      <el-table-column
        prop="source"
        label="商家编号"
        v-if="columns[0].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="amount"
        label="数量（只）"
        v-if="columns[1].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="inStorage"
        label="入库仓库"
        v-if="columns[2].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="enterTime"
        label="入库时间"
        v-if="columns[3].show"
        width="210"
      ></el-table-column>
      <el-table-column label="操作" v-if="columns[4].show">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-share"
            @click="checkDetail(scope.row.inId)"
            >详情</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #FA6962"
            @click="deleteById(scope.row.inId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加对话框 -->
    <InPopup
      :addForm="addForm"
      :title="'新增订单'"
      :dialogVisible="addDialogVisible"
      @closeAddDialog="closeAddDialog"
      @closeAddDialogB="closeAddDialogB"
      v-show="addDialogVisible"
      @addDisplayData="addDisplayData"
    />
    <!-- 详情对话框 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="80%">
      <el-table :data="detailForm" style="width: 100%">
        <el-table-column prop="typeId" label="产品编号" width="100">
        </el-table-column>
        <el-table-column prop="batchId" label="加工批次" width="150">
        </el-table-column>
        <el-table-column prop="materialName" label="原料名称" width="100">
        </el-table-column>
        <el-table-column prop="count" label="数量" width="100">
        </el-table-column>
        <el-table-column prop="specification" label="规格" width="100">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100">
        </el-table-column>
        <el-table-column prop="total" label="总价" width="100">
        </el-table-column>
        <el-table-column prop="remark" label="入库备注" width="150">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="150">
        </el-table-column>
        <el-table-column prop="gmtModified" label="修改时间" width="150">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <EditDialog
      :editForm="editForm"
      :title="'修改订单'"
      :dialogVisible="dialogVisible"
      @closeEditDialog="closeEditDialog"
      @closeEditDialogB="closeEditDialogB"
      v-show="dialogVisible"
      @editDisplayData="editDisplayData"
    />
  </div>
</template>

<script>
import InPopup from "@/components/Process/Inpopup.vue";
import EditDialog from "@/components/Process/CSInEditDialog.vue";
import {
  getProcessCInByPage,
  getProcessCInById,
  deleteStorage,
  batchDelete
} from "@/api/process/CStorageIn";

export default {
  name: "ColdStorageIn",
  meta: {
    title: "冷库入库",
  },
  components: {
    InPopup,
    EditDialog
  },
  data() {
    return {
      columns: [
        { name: "商家编号", show: true },
        { name: "数量（只）", show: true },
        { name: "入库仓库", show: true },
        { name: "入库时间", show: true },
        { name: "操作", show: true },
      ],
      coldInDataByPage: [],
      coldInData: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
      },
      total: 11,
      addDialogVisible: false,
      dialogVisible: false,
      detailDialogVisible: false,
      searchText: "",
      time: "",
      materialNames: [],
      addForm: {},
      detailForm: [],
      editForm: {},
      ProcessInfo: {},
      tempIds: []
    };
  },
  created() {
    this.getProcessCInByPage();
  },
  computed: {
    select_processingId() {
      return this.$store.state.Usersetting.ProcessInfo.processingId;
    },
  },
  methods: {
    // 分页获取库存数据
    async getProcessCInByPage() {
      const { data: res } = await getProcessCInByPage(
        this.pageInfo.currentPage,
        this.pageInfo.pageSize,
        this.select_processingId
      );
      if (res.statusCode !== 20000) {
        console.log(res);
        return this.$message.error(res.message);
      }
      console.log(res, 55554);
      this.coldInDataByPage = res.data.records;
      this.total = res.data.total;
      this.pageInfo.pageSize = res.data.size;
      this.pageInfo.currentPage = res.data.current;
    },
    // 页面列表数改变
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getProcessCInByPage();
    },
    // 页数改变
    handleCurrentChange(newPage) {
      this.pageInfo.currentPage = newPage;
      this.getProcessCInByPage();
    },
    // 根据id获取库存详情
    async getProcessCInById(id) {
      const { data: res } = await getProcessCInById(id);
      console.log(res, 333);
      // this.coldInData = res;
      // console.log(this.coldInData);
    },
    //打开新增表单
    add() {
      this.addDialogVisible = true;
      this.title = "新增订单";
      this.addForm = {
        amount: 0,
        enterTime: "",
        inProcessingBills: [
          {
            batchId: "",
            count: 0,
            materialName: "",
            price: 0,
            remark: "",
            specification: "",
            total: 0,
            typeId: 0,
          },
        ],
        inStorage: "",
        processingId: this.select_processingId,
        source: 0,
        totalMoney: 0,
        totalRemark: "",
      };
    },
    //关闭新增表单
    closeAddDialog(a) {
      //是否打开详情表单
      // this.detailDialog = a;
      //是否新增打开表单
      this.addDialogVisible = a;
      this.addForm = {
        amount: 0,
        enterTime: "",
        inProcessingBills: [
          {
            batchId: "",
            count: 0,
            materialName: "",
            price: 0,
            remark: "",
            specification: "",
            total: 0,
            typeId: 0,
          },
        ],
        inStorage: "",
        processingId: this.select_processingId,
        source: 0,
        totalMoney: 0,
        totalRemark: "",
      };
      this.getProcessCInByPage();
    },
    //是否新增打开表单
    closeAddDialogB(a) {
      this.addDialogVisible = a;
      this.addForm = {
        amount: 0,
        enterTime: "",
        inProcessingBills: [
          {
            batchId: "",
            count: 0,
            materialName: "",
            price: 0,
            remark: "",
            specification: "",
            total: 0,
            typeId: 0,
          },
        ],
        inStorage: "",
        processingId: this.select_processingId,
        source: 0,
        totalMoney: 0,
        totalRemark: "",
      };
      this.getProcessCInByPage();
    },
    addDisplayData() {
      this.getProcessCInByPage();
    },
    // 打开详情框
    async checkDetail(id) {
      this.detailDialogVisible = true;
      console.log(id, 66666);
      const { data: res } = await getProcessCInById(id);
      console.log(res);
      this.detailForm = res.data;
    },
    // columns改变
    changeColumn(columns) {
      this.columns = columns;
      this.$refs.flowListRef.doLayout();
    },
    
    //打开修改表单
    async edit(info) {
      this.dialogVisible = true;
      this.title = "修改订单";
      const { data: res } = await getProcessCInById(info.inId);
      console.log(res, 'hhhh');
      // console.log(info, 'hhhh2');
      this.editForm = {
        amount: info.amount,
        enterTime: info.enterTime,
        inProcessingBills: res.data,
        inStorage: info.inStorage,
        processingId: this.select_processingId,
        source: info.source,
        totalMoney: info.totalMoney,
        totalRemark: info.totalRemark,
      };
    },
    //关闭新增表单
    closeEditDialog(a) {
      //是否打开详情表单
      // this.dialogVisible = a;
      //是否新增打开表单
      this.dialogVisible = a;
      this.editForm = {
        amount: 0,
        enterTime: "",
        inProcessingBills: [
          {
            batchId: "",
            count: 0,
            materialName: "",
            price: 0,
            remark: "",
            specification: "",
            total: 0,
            typeId: 0,
          },
        ],
        inStorage: "",
        processingId: 0,
        source: 0,
        totalMoney: 0,
        totalRemark: "",
      };
      this.getProcessCInByPage();
    },
    //是否新增打开表单
    closeEditDialogB(a) {
      this.dialogVisible = a;
      this.editForm = {
        amount: 0,
        enterTime: "",
        inProcessingBills: [
          {
            batchId: "",
            count: 0,
            materialName: "",
            price: 0,
            remark: "",
            specification: "",
            total: 0,
            typeId: 0,
          },
        ],
        inStorage: "",
        processingId: 0,
        source: 0,
        totalMoney: 0,
        totalRemark: "",
      };
      this.getProcessCInByPage();
    },
    editDisplayData() {
      this.getProcessCInByPage();
    },
    // 删除
    deleteById(inId) {
      this.$confirm(
        "是否永久删除该产品的库存信息（此操作不可撤销）？",
        "删除",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }
      )
        .then(async () => {
          const { data: res } = await deleteStorage(inId);
          if (res.statusCode !== 20000) {
            console.log(res);
            return this.$message.error(res.message);
          }
          this.$message.warning(res.message);
          let total = this.total;
          let size = this.pageInfo.pageSize;
          this.getProcessCInByPage();
          if (this.pageInfo.currentPage !== 1 && total % size === 1) {
            this.pageInfo.currentPage--;
            this.getProcessCInByPage();
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 批量删除
    bulkDeletion() {
      this.$confirm(
        "是否永久删除所有选中产品的库存信息（此操作不可撤销）？",
        "批量删除",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }
      )
        .then(async () => {
          this.$refs.CSInInfo.selection.forEach((value) => {
            this.tempIds.push(value.inId);
          });
          const { data: res } = await batchDelete(this.tempIds);
          if(res.statusCode !== 20000) return;
          if (this.pageInfo.currentPage !== 1 && total % size === 1) {
            this.pageInfo.currentPage--;
            this.getProcessCInByPage();
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
      console.log("this.$refs.CSInInfo");
      console.log(this.$refs.CSInInfo.selection);
      console.log("this.$refs.CSInInfo");
    },
  },
};
</script>

<style lang="scss" scoped>
.searchInput {
  margin: 0px 0 18px 6px;
  width: 276px;
}

.searchBtn {
  float: right;
}

.table {
  padding-top: 14px;
  font-size: 14px;
  text-align: center !important;
  color: rgb(102, 102, 102);
}

/deep/ .el-table th {
  z-index: 99;
  text-align: center;
  line-height: 29px;
  color: rgb(102, 102, 102);
  background-color: rgb(248, 248, 248);
}

/deep/ .el-table td {
  z-index: 99;
  text-align: center;
  line-height: 29px;
}

/deep/ .el-pagination {
  padding: 15px 5px;
}

.formClass {
  text-align: left;
}

.enterTimeLabel {
  display: inline-block;
  padding-right: 8px;
  width: 108px;
  text-align: right;
}

.float span {
  float: left;
}
</style>